<template>
  <div>
    <n-upload
        directory-dnd
            :action="url"
            :name="name"
            :max="1"
        list-type="image-card"
        @finish="handleFinish">
      <n-upload-dragger class="flex  flex-column round">
        <div>
          <n-icon size="30" :depth="3">
            <Icon icon="material-symbols:archive-outline-sharp"></Icon>
          </n-icon>
        </div>
        <n-text style="font-size: 11px">
          点击或者拖动文件到该区域上传
        </n-text>
      </n-upload-dragger>
    </n-upload>
  </div>
</template>

<script setup lang="ts">
import {Icon} from "@iconify/vue";
import {computed, ref} from "vue";
import {imagePathPrefix, uploadFile} from '~/settings'
import {UploadFileInfo} from "naive-ui";

const url = uploadFile.url
const name = uploadFile.name

const props = defineProps({
  image: {
    type: String,
    default: '',
  }
})
const emits = defineEmits(['update:image'])
const curImage = computed({
  get: () => {
    return props.image
  },
  set: (val) => {
    emits('update:image', val)
  }
})

const handleFinish = ({file, event}: {
  file: UploadFileInfo
  event?: ProgressEvent
}) => {
  const res = JSON.parse((event?.target as XMLHttpRequest).response)
  file.name = res.data
  file.url = imagePathPrefix + file.name
  curImage.value = file.name
  window.$message.success(`图片上传成功，访问路径：` + file.url)
  return file
}

const image = ref('')
</script>

<style scoped>

</style>